<script setup lang="ts">
import AppSettings from "@/components/base/AppSettings.vue";
import {ConfigProvider, useId} from "reka-ui";
import {Toaster} from '@/components/ui/sonner'
import {useTextDirection} from "@vueuse/core";
import {computed} from "vue";
import Sonner from "@/components/ui/sonner/Sonner.vue";

const useIdFunction = () => useId()

const textDirection = useTextDirection({initialValue: 'ltr'})
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')

</script>

<template>
  <ConfigProvider :use-id="useIdFunction" :dir="dir">
    <div id="app" vaul-drawer-wrapper class="relative">
      <RouterView/>
      <AppSettings/>
    </div>

    <Toaster/>
    <Sonner class="pointer-events-auto"/>
  </ConfigProvider>
</template>

<style scoped></style>
